import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { Tools, Icon, List, PhotoSwipe, Bubble, Modal} from 'weaver-mobile';
import { ListPage } from 'weaver-mobile-page'; 

const { getWeaverFile, getLabel } = Tools;

@inject('viewStore')
@observer
export default class Files extends Component {
  static defaultProps = {
    prefixCls: 'email-view-files',
  }
  
  render() {
    const isiPhone = Tools.mobileDetect().is('iPhone');
    const isEmobile = Tools.mobileDetect().isEmobile();
    const { prefixCls, doFilePreview, viewStore: { baseInfo: { fileInfos,prohibitDownload, unPreview } } } = this.props;
    if (!fileInfos) return null;
    const { fileList, count } = fileInfos;
    if (count === 0) return null;
    
    return (
      <div className={prefixCls}>
        <div className={`${prefixCls}-title`}>
          <Icon type="enclosure" size="xxs" />
          {getLabel(156, '附件')}{count}{getLabel(27591, '个')}
        </div>
        <div className={`${prefixCls}-list`}>
          <List>
            {fileList.map(file => {
              const { previewUrl, fileid, isImg, icon, iconColor } = file;
              const photoFile = isImg === 'true' ? [{
                id: file.id,
                name: file.filename,
                fileExtendName: file.fileExtendName,
                url: file.previewUrl
              }] : []
              return (
                <ListPage.Item
                  key={fileid}
                  data={file}
                  // onClick={() => doFilePreview(file)}
                  onClick={() =>{
                    if("1" == unPreview){
                      //禁止预览
                      if("1" == prohibitDownload){
                        //后台【禁止附件预览】和【禁止移动端下载】同时关闭时，点击附件时需要有提示
                        Bubble.warning(getLabel('520701','系统设置原因，该文件只能在PC端下载查看'), 2);
                      }else{
                        //下载
                        this.curentModal = Modal.alert(getLabel('520702','后台邮件系统设置,禁止附件预览'), getLabel('514233','是否下载？'), [
                          { text: getLabel('31129', '取消'), onPress: () => {  } },
                          { text: getLabel('826', '确定'), onPress: () => {
                            if(isiPhone&&!isEmobile) {
                              window.open(file.filelink+"&_ec_ismobile=true&ddcode="+file.ddcode);
                            } else {
                              Tools.getWeaverFile(file.filelink+"&_ec_ismobile=true&ddcode="+file.ddcode, 'iframe','email');
                            }
                          }},
                        ])
                      }
                    }else{
                      isImg === 'true' ? PhotoSwipe.showImage(photoFile, 0) : doFilePreview(file)
                    }
                  } }
                  template={{
                    default: [
                      {
                        key: 'col1',
                        style: { flex: 'none' },
                        render() {
                          if (isImg === 'true') {
                            return (
                              <img src={previewUrl} alt="" style={{ width: 30, height: 30, verticalAlign: 'middle', display: 'inline-block' }} />
                            )
                          } else {
                            return <Icon type={icon} color={iconColor} style={{ width: 30, height: 30, verticalAlign: 'middle' }} />
                          }
                        },
                      },
                      {
                        key: 'col2',
                        configs: [
                          { key: 'row1', configs: [{ key: 'filename' }] },
                          { key: 'row2', configs: [{ key: 'filesize' }] },
                        ],
                      },
                      {
                        key: 'col3',
                        render(data) {
                          return  prohibitDownload =="0"? (
                            <span onClick={(event) => {
                              if (event) {
                                event.stopPropagation && event.stopPropagation();
                                event.preventDefault && event.preventDefault();
                                event.nativeEvent && event.nativeEvent.preventDefault();
                              }else if (window.event) {//针对IE
                                window.event.cancelBubble = true;
															}
															if(isiPhone&&!isEmobile) {
                              	window.open(data.filelink+"&_ec_ismobile=true&ddcode="+data.ddcode);
                              //  let url = data.filelink;
                              //  var fileId = '';
                              //  fileId = url.slice(url.indexOf('fileid='));
                              //  fileId = fileId.slice(0, fileId.indexOf('&'));
                              //  Tools.callApi({
                              //      url: '/api/doc/mobile/imagefile/getMobileDownloadParams?' + fileId,
                              //      method: 'GET',
                              //      params: {
                              //          type: 'email'
                              //      },
                              //      type: 'json'
                              //  }).then(function (res) {
                              //      if (res.params) {
                              //          url += res.params;
                              //      }
                   
                              //      window.location = url+"&_ec_ismobile=true";
                              //  })['catch'](function () {
                              //      // console && console.log('get download info failed ' + JSON.stringify(error))
                              //    window.location = data.filelink + "&_ec_ismobile=true";
                              //  }); 

															} else {
                                Tools.getWeaverFile(data.filelink+"&_ec_ismobile=true&ddcode="+data.ddcode, 'iframe','email');
															}
                            }}><Icon type="download" /></span>
                          ):(<span></span>);
                        },
                      },
                    ],
                  }}
                />
              );
            })}
          </List>
        </div>
      </div>
    );
  }
}